<template>
  <div class="app-container calendar-list-container">
    <!--免填日报白名单-->
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{ $t('management.dailyWhiteList.queryCriteria') }}</span></el-col>
      </el-row>

      <el-form :inline="true" :model="listQuery" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{ $t('management.dailyWhiteList.username') }}</div>
              <el-autocomplete
                clearable
                style="width: 100%"
                v-model="listQuery.value"
                :fetch-suggestions="getUserList"
                :placeholder="$t('management.dailyWhiteList.placeholder.content')"
                @select="setSales"
              ></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 23px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">
              {{ $t('button.query') }}
            </div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">
              {{ $t('button.reset') }}
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{ $t('management.dailyWhiteList.dailyReportManagement') }}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <!--新增-->
          <div class="yt-btn yt-btn-ys" type="primary" @click="handleAdd">
            {{ $t('button.new') }}
          </div>
          <!--删除-->
          <div class="yt-btn yt-ml8" type="danger" @click="handleDelete">
            {{ $t('button.delete') }}
          </div>
          <!--<div class="yt-btn yt-ml8" type="danger" @click="handleUpdate">-->
          <!--保存-->
          <!--</div>-->
        </div>

        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;" class="yt-table" @selection-change="handleSelectionChange" v-loading.body="listLoading" max-height="600">
          <el-table-column type="selection" align="center" class-name="pd" prop="id" width="60"/>
          <el-table-column type="index" align="center" :label="$t('management.dailyWhiteList.serialNumber')"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.username')" prop="username" class-name="pd"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.name')" prop="name" class-name="bg"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.ename')" prop="ename" class-name="bg"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.erpBuNo')" prop="erpBuNo" class-name="bg"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.erpBuName')" prop="erpBuName" class-name="bg"/>
          <el-table-column align="center" label="Account" prop="bu" class-name="bg"/>
          <el-table-column align="center" label="Category" prop="bg" class-name="bg"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.updateName')" prop="updateName" class-name="bg"/>
          <el-table-column align="center" :label="$t('management.dailyWhiteList.updateTime')" prop="updateTime" class-name="bg"/>

        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <el-dialog
      :title="$t('management.dailyWhiteList.dialogTitle')"
      :visible.sync="dictDialogVisible"
      class="yt-dialogForm-box"
      append-to-body
    >
      <el-form
        :rules="rules"
        ref="rulesForm"
        :inline="true"
        :model="dialogForm"
        label-width="100px"
      >
        <el-form-item :label="$t('management.dailyWhiteList.username')" prop="value">
          <el-autocomplete
            clearable
            v-model="dialogForm.value"
            :fetch-suggestions="getUserList"
            :placeholder="$t('management.dailyWhiteList.placeholder.content')"
            @select="setSales"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <div class="yt-btn yt-ml8" type="danger" @click="resetForm('rulesForm')">
           {{$t('button.cancel')}}
          </div>
          <div class="yt-btn yt-btn-ys" type="primary" @click="editorDict('rulesForm')">
            {{$t('button.determine')}}
          </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import { queryList, insert, batchDelete } from '@/api/management/dailyWhiteList';

  export default {
    name: 'dailyManagement',
    data() {
      const validateSales = (rule, value, callback) => {
        if (!value) {
          callback(new Error(this.$t('management.dailyWhiteList.tips.username')));
        } else {
          if (this.userList.findIndex(item => this.dialogForm.value === item.value) < 0) {
            this.dialogForm.value = ''
            callback(new Error(this.$t('management.dailyWhiteList.tips.username')));
          } else {
            callback()
          }
        }
      };
      return {
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          value: ''
        },
        total: 0,
        userList: [],
        list: [],
        selectionList: [],
        dictDialogVisible: false,
        rules: {
          value: [
            {
              required: true,
              validator: validateSales
            }
          ]
        },
        dialogForm: { value: '', id: '' }
      };
    },
    methods: {
      setSales(item) {
        if (this.dictDialogVisible) {
          // 新增
          this.dialogForm.id = item.id
        } else {
          this.listQuery.value = item.value;
        }
      },
      editorDict(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            insert({ userId: this.dialogForm.id }).then(res => {
              this.$notify({
                title: res.status === 200 ? this.$t('tips.editSuccess') : this.$t('tips.success'),
                message: res.status === 201 ? this.$t('tips.editFail') + res.data : this.$t('tips.success'),
                type: res.status === 200 ? 'success' : 'warning'
              });
              if (res.status === 200) {
                this.resetForm('rulesForm');
                this.dictDialogVisible = false;
                this.getList();
              }
            });
          } else {
            return false;
          }
        });
      },
      getList() {
        this.listLoading = true;
        queryList(this.listQuery).then(response => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        });
      },

      handleUpdate() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('tips.pleaseChoose'),
            type: 'warning'
          });
          return;
        }
      },
      handleAdd() {
        this.dictDialogVisible = true;
        this.dialogForm = { value: '', id: '' }
      },
      handleDelete() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('tips.pleaseChoose'),
            type: 'warning'
          });
          return;
        }
        this.$confirm(this.$t('tips.permanentDelete'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          const list = this.selectionList.map(item => item.id)
          batchDelete(list).then(() => {
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.deleteSuccess'),
              type: 'success',
              duration: 2000
            });
            this.getList();
          });
        });
      },
      getUserList(queryString, cb) {
        // 获取员工编号
        getUserInfoByName({ username: queryString }).then(res => {
          this.userList = res.data.rows;
          for (let i = 0; i < this.userList.length; i++) {
            this.userList[i].value = this.userList[i].ename;
          }
          cb(this.userList);
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = { page: 1, limit: 10, value: '' };
        this.getList();
      },
      resetForm(formName) {
        this.dictDialogVisible = false;
        this.dialogForm = {};
        this.$refs[formName].resetFields();
      }
    },
    created() {
      this.getList();
    }
  };
</script>
<style scoped>
</style>
